Collections allow you to group list objects together.

Basic

  • Alvin
  • Alvin
  • Alvin
  • Alvin

  <ul class="collection">
    <li class="collection-item">Alvin</li>
    <li class="collection-item">Alvin</li>
    <li class="collection-item">Alvin</li>
    <li class="collection-item">Alvin</li>
  </ul>
  

Headers

  • First Names

  • Alvin
  • Alvin
  • Alvin
  • Alvin

  <ul class="collection with-header">
    <li class="collection-header"><h4>First Names</h4></li>
    <li class="collection-item">Alvin</li>
    <li class="collection-item">Alvin</li>
    <li class="collection-item">Alvin</li>
    <li class="collection-item">Alvin</li>
  </ul>
  

Secondary content


  <ul class="collection with-header">
    <li class="collection-header"><h4>First Names</h4></li>
    <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
    <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
    <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
    <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
  </ul>
  

Avatar Content

  • Title

    First Line
    Second Line

    grade
  • folder Title

    First Line
    Second Line

    grade
  • insert_chart Title

    First Line
    Second Line

    grade
  • play_arrow Title

    First Line
    Second Line

    grade

  <ul class="collection">
    <li class="collection-item avatar">
      <img src="../../../images/avatar/avatar-7.png" alt="" class="circle">
      <span class="title">Title</span>
      <p>First Line <br>
      Second Line
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle">folder</i>
      <span class="title">Title</span>
      <p>First Line <br>
      Second Line
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle green">insert_chart</i>
      <span class="title">Title</span>
      <p>First Line <br>
      Second Line
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle red">play_arrow</i>
      <span class="title">Title</span>
      <p>First Line <br>
      Second Line
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
  </ul>
  

Dismissable Content

You can just add the class dismissable to enable each collection item to be swiped away. This is only for touch enabled devices.


  <ul class="collection">
    <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
    <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
    <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
    <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
  </ul>
  
settings
close
Theme Customizer

Customize & Preview in Real Time

Navbar Options

Footer Options

add_shopping_cart